<template>
	<!-- 还有一个实验室图片没弄 -->

	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<!-- 开始时间日期选择器 -->
		<u-datetime-picker :show="showStart" v-if="isChangeStart" v-model="actStart" mode="time"
			@confirm="hanleStartConfirm" @cancel="hanleStartCancle"></u-datetime-picker>
		<!-- 结束时间日期选择器 -->
		<u-datetime-picker :show="showEnd" v-if="isChangeEnd" v-model="actEnd" mode="time" @confirm="hanleEndConfirm"
			@cancel="hanleEndCancle"></u-datetime-picker>
		<u-picker :show="showType" :columns="columns" keyName="typeName" @confirm="handleTypeChoose"
			@cancel="handleTypeCancel"></u-picker>
		<u-picker :show="showWay" :columns="columns1" keyName="typeName" @confirm="handleTypeChoose1"
			@cancel="handleTypeCancel1"></u-picker>
		<u--form :borderBottom="false" :model="form" :rules="rules" ref="uForm" labelWidth="0">
			<view class="top_info">
				<!-- 实验室名称 -->
				<view class="info_item">
					<view class="item_title">实验室名称
						<view class="important">*</view>
					</view>
					<view class="item_input">
						<u-form-item prop="labName">
							<u--input border="none" placeholder="请输入实验室名称" v-model="form.labName" clearable></u--input>
						</u-form-item>
					</view>

				</view>
				<!-- 实验室类别 -->
				<view class="info_item">

					<view class="item_title">实验室类别
						<view class="important">*</view>
					</view>
					<view class="item_input" @click="handleChooseT(0)">
						<u-form-item prop="typeId">
							<u-input border="none" disabledColor="#ffffff" disabled placeholder="请选择实验室类别"
								v-model="typeValue" clearable>

							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>

				</view>
				<!-- 审核方式 -->
				<view class="info_item">
					<view class="item_title">审核方式
						<view class="important">*</view>
					</view>
					<view class="item_input" @click="handleChooseT(1)">
						<u-form-item prop="isExamine">
							<u-input border="none" disabledColor="#ffffff" disabled placeholder="请选择预约审核方式"
								v-model="wayValue" clearable>

							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>

				</view>
				<!-- 实验室容量 -->
				<view class="info_item">
					<view class="item_title">实验室容量
						<view class="important">*</view>
					</view>
					<view class="item_input">
						<u-form-item prop="volume">
							<u--input type="number" placeholder="请输入实验室容量" border="none" v-model="form.volume"
								clearable></u--input>
						</u-form-item>
					</view>

				</view>

				<!-- 实验室地址 -->
				<view class="info_item">
					<view class="item_title">实验室地址
						<view class="important">*</view>
					</view>
					<view class="item_input">
					</view>

				</view>
				<!-- 实验室地址填写框 -->
				<view class="address">
					<u-form-item prop="address">
						<u--textarea :maxlength="200" count border="none" v-model="form.address"
							placeholder="请描述实验室地址"></u--textarea>
					</u-form-item>

				</view>


			</view>
			<!-- 可预约时间段 -->
			<view class="timeoption">
				<view class="time_top">可预约时间段
					<view class="important">*</view>
				</view>
				<!-- 添加可预约时间段 -->
				<view class="time_add"><u-button type="primary" size="mini" text="添加时间段"
						@click="handleAddTimeOp"></u-button>
				</view>
				<!-- 每一个时间段选项 -->
				<view class="t_item" v-for="(item,index) in form.selectTimes" :key="index">
					<!-- 开始时间 -->
					<view class="start">
						<view class="tip">开始：</view>
						<view class="text" v-if="item.start">{{item.start}}</view>
						<view class="text" v-if="!item.start">-</view>
						<view class="edit_btn">
							<u-button type="primary" :plain="true" size="mini" text="编辑"
								@click="handleEditTime(index,0)"></u-button>
						</view>
					</view>
					<!-- 结束时间 -->
					<view class="end">
						<view class="tip">结束：</view>
						<view class="text" v-if="item.end">{{item.end}}</view>
						<view class="text" v-if="!item.end">-</view>
						<view class="edit_btn">
							<u-button type="primary" :plain="true" size="mini" text="编辑"
								@click="handleEditTime(index,1)"></u-button>
						</view>
					</view>
					<!-- 删除按钮 -->
					<view class="del_btn"><u-button type="error" :plain="true" size="mini" text="删除"
							@click="handleDelTime(index)"></u-button></view>
				</view>

			</view>

			<!-- 实验室设备 -->
			<view class="eq_center">
				<!-- 顶部标题 -->
				<view class="eq_top">实验室设备
					<view class="important">*</view>
				</view>
				<!-- 添加设备按钮 -->
				<view class="eq_add"><u-button type="primary" size="mini" text="添加设备" @click="handleAddEq"></u-button>
				</view>
				<!-- 每一个设备 -->
				<view class="c_item" v-for="(item,index) in form.eqList" :key="index">
					<!-- 删除设备按钮 -->
					<view class="eq_sub"><u-button type="warning" size="mini" text="删除"
							@click="handleRemoveEq(index)"></u-button></view>
					<!-- 设备名称 -->
					<view class="item_name">
						<view class="item_tip">设备名称：</view>
						<view class="item_input">

							<u-input placeholder="请输入设备名称" v-model="item.equName" clearable>

							</u-input>
						</view>
					</view>
					<!-- 数量 -->
					<view class="item_name">
						<view class="item_tip">数量：</view>
						<view class="item_input">

							<u-input type="number" placeholder="请输入设备数量" v-model="item.number" clearable>

							</u-input>
						</view>
					</view>
				</view>

			</view>
			<!-- 实验室照片 -->
			<view class="lab_photo">

				<view class="photo_top">实验室照片
					<view class="important">*</view>
				</view>
				<view class="photo_bottom">

					<view class="b_upload">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="90" height="90"></u-upload>


					</view>

				</view>
			</view>
			<!-- 实验室简介 -->
			<view class="intor_new">
				<!-- 实验室简介 -->
				<view class="info_item">
					<view class="item_title">实验室简介
						<view class="important">*</view>
					</view>
					<view class="item_input">
					</view>

				</view>
				<!-- 实验室简介 -->
				<view class="address">
					<u-form-item prop="intro">
						<u--textarea :height="130" :maxlength="900" count border="none" v-model="form.intro"
							placeholder="请输入实验室简介"></u--textarea>
					</u-form-item>

				</view>
			</view>




		</u--form>
		<!-- 底部提交按钮 -->
		<view class="submit">
			<u-button type="primary" text="提交" @click="handleSubmitLab"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getLablist,
		getAllLabType,
		createLab
	} from '../../api/laboratory.js'
	import {
		getChuo
	} from '../../utils/time.js'
	export default {
		data() {
			return {
				fileList1: [],
				// 
				// 结束是时间是否有所改变(为了回显)
				isChangeEnd: false,
				// 开始是时间是否有所改变(为了回显)
				isChangeStart: false,
				// 当前活跃的时间段对象下标
				actTimeIndex: 0,
				// 当前结束时间
				actEnd: "",
				// 当前开始时间
				actStart: "",
				// 结束时间选择
				showEnd: false,
				// 开始时间选择
				showStart: false,
				eqList: [{
						equName: "",
						number: 0,
					},

				],
				wayValue: "",
				typeValue: "",
				showType: false,
				showWay: false,
				form: {
					labName: "",
					address: "",
					intro: "",
					selectTimes: [{
						start: "",
						end: ""
					}],
					eqList: [{
							equName: "",
							number: 0,
						},

					]

				},
				rules: {

					labName: [{
						type: 'string',
						required: true,
						message: '请输入实验室名称',
						trigger: ['blur']
					}, ],
					typeId: [{
						type: 'number',
						required: true,
						message: '请选择实验室类别',
						trigger: ['change']
					}, ],
					isExamine: [{
						type: 'number',
						required: true,
						message: '请选择审核方式',
						trigger: ['change']
					}, ],
					volume: [{
						type: 'number',
						required: true,
						message: '请输入实验室容量',
						trigger: ['blur']
					}, ],
					address: [{
						type: 'string',
						required: true,
						message: '请输入实验室地址',
						trigger: ['blur']
					}, ],
					intro: [{
						type: 'string',
						required: true,
						message: '请输入实验室简介',
						trigger: ['blur']
					}, ],
				},
				// 所有实验室类别
				types: [],
				// 所有审核方式
				ways: [{
						isExamine: 0,
						typeName: "自动审核"
					},
					{
						isExamine: 1,
						typeName: "人工审核"
					},
				],
				// 实验室类别选项
				columns: [],
				// 审核方式选项
				columns1: [
					[{
							isExamine: 0,
							typeName: "自动审核"
						},
						{
							isExamine: 1,
							typeName: "人工审核"
						},
					]
				]
			};
		},
		onLoad() {
			this.handleGetAllType()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {

			// 提交按钮点击事件
			handleSubmitLab() {
				this.$refs.uForm.validate().then(res => {
					if (!this.form.photo) {
						uni.$u.toast("请上传实验室照片")
						return
					} else {
						// 判断是否所有时间段都填写完整了
						let arr = [...this.form.selectTimes]
						let flage1 = false
						arr.forEach((item, index) => {
							if (!item.start || !item.end) {

								flage1 = true
								return
							}
						})
						if (flage1) {
							uni.$u.toast("请将所有可预约时间段信息填写完整")
							return
						}
						// 判断是否所有设备信息都填写完整了
						let arr1 = [...this.form.eqList]
						let flageEqName = false
						arr1.forEach((item, index) => {

							if (item.equName == "") {
								flageEqName = true
								return
							}
						})
						if (flageEqName) {
							uni.$u.toast("请将所有设备信息填写完整")
							return
						}
						let flageEqNum = false
						let flageNumEmpty = false
						arr1.forEach((item, index) => {

							if (item.number === 0) {
								flageEqNum = true
								return
							}
							if (item.number == "") {
								flageNumEmpty = true
								return
							}

						})
						if (flageNumEmpty) {
							uni.$u.toast("设备数量不可为空")
							return
						}

						if (flageEqNum) {
							uni.$u.toast("设备数量不可为0")
							return
						}

						// 前边的难关都过了 先将所有容量修改为数字型
						this.form.volume = parseInt(this.form.volume)
						// 再将所有实验室设备数量修改为数字型
						let arr2 = [...this.form.eqList]
						arr2.forEach((item, index) => {
							item.number = parseInt(item.number)

						})
						this.form.eqList = [...arr2]

						createLab(this.form).then(res => {
							uni.$u.toast("发布成功！")
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/admin_center/admin_center"
								})
							}, 500)


						})


					}
					// 

				}).catch(err => {
					uni.$u.toast("请输入所有必填项")
				})

				// console.log(this.form);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)


					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.form.photo = this.fileList1[0].url
				// console.log(this.form);

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://127.0.0.1:7001/imgUpload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let result = JSON.parse(res.data)

							setTimeout(() => {
								resolve(result.data)
							}, 1000)
						}
					});
				})
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.form.photo = ""
				// console.log(this.form);
			},
			// 开始时间确定
			hanleStartConfirm(data) {
				//是否是时间不足
				let isTimeNo = false
				// 是否可以添加
				let icanAdd = true
				// 最少时间
				let temp = 30 * 60 * 1000
				let value = data.value
				let startV = getChuo(value)
				// 判断在结束时间存在的情况下
				let end = this.form.selectTimes[this.actTimeIndex].end
				if (end) {
					let endV = getChuo(end)
					let arr = [...this.form.selectTimes]
					arr.forEach((item, index) => {
						if (index != arr.length - 1) {
							let startT = getChuo(item.start)
							let endT = getChuo(item.end)
							// 被我当前时间段所包裹
							if (endV > endT && startV < startT) {
								this.icanAdd = false
								return
							}
							// 如果开始时间小于已有时间段的开始时间
							if (startV < startT) {
								let sub = startT - startV
								if (sub < temp) {
									this.$u.toast("可预约时间段至少30分钟")
									isTimeNo = true
									icanAdd = false

									return
								}
							}
							// 开始时间重叠
							if (startV == startT) {

								icanAdd = false
								return
							}
							// 开始时间被包裹，铁定相交
							if (startV > startT && startV < endT) {
								icanAdd = false
								return
							}

						}
					})


					let temp1 = 30 * 60 * 1000
					let sub1 = endV - startV
					// 判断时间段不少于30分钟
					if (sub1 < temp1) {
						if (sub1 < 0) {
							this.$u.toast("开始时间不可大于结束时间")
							isTimeNo = true
							icanAdd = false
							return
						} else {
							this.$u.toast("可预约时间段至少30分钟")
							isTimeNo = true
							icanAdd = false
							return
						}

					}

				} else {

					let arr = [...this.form.selectTimes]
					arr.forEach((item, index) => {
						if (index != arr.length - 1) {
							let startT = getChuo(item.start)
							let endT = getChuo(item.end)

							// 如果开始时间小于已有时间段的开始时间
							if (startV < startT) {
								let sub = startT - startV
								if (sub < temp) {
									this.$u.toast("可预约时间段至少30分钟")
									isTimeNo = true
									icanAdd = false
									return
								}
							}
							// 开始时间重叠
							if (startV == startT) {

								icanAdd = false
								return
							}
							// 开始时间被包裹，铁定相交
							if (startV > startT && startV < endT) {
								icanAdd = false
								return
							}

						}
					})



				}



				if (icanAdd) {
					this.form.selectTimes[this.actTimeIndex].start = value
					this.showStart = false
					this.isChangeStart = false
					return
				} else {

					if (!isTimeNo) {
						this.$u.toast("与已有时间段相冲突")
					}

					return
				}

			},
			hanleStartCancle() {
				this.showStart = false
				this.isChangeStart = false
			},
			// 结束时间确定
			hanleEndConfirm(data) {

				//是否是时间不足
				let isTimeNo = false
				// 是否可以添加
				let icanAdd = true
				// 最少时间
				let temp = 30 * 60 * 1000
				let value = data.value
				let endV = getChuo(value)
				// 判断在结束时间存在的情况下
				let start = this.form.selectTimes[this.actTimeIndex].start
				if (start) {
					let startV = getChuo(start)
					let arr = [...this.form.selectTimes]
					arr.forEach((item, index) => {
						if (index != arr.length - 1) {
							let startT = getChuo(item.start)
							let endT = getChuo(item.end)

							// 被我当前时间段所包裹
							if (endV > endT && startV < startT) {
								this.icanAdd = false
								return
							}
							// 如果结束时间大于已有时间段的结束时间
							if (endV > endT) {

								let sub = endV - endT
								if (sub < temp) {
									console.log("我被调用了");
									this.$u.toast("可预约时间段至少30分钟")
									isTimeNo = true
									icanAdd = false
									return
								}
							}
							// 结束时间重叠
							if (endV == endT) {

								icanAdd = false
								return
							}
							// 结束时间被包裹，铁定相交
							if (endV > startT && endV < endT) {
								icanAdd = false
								return
							}

						}
					})


					let temp1 = 30 * 60 * 1000
					let sub1 = endV - startV
					// 判断时间段不少于30分钟
					if (sub1 < temp1) {
						if (sub1 < 0) {
							this.$u.toast("结束时间不可小于开始时间")
							isTimeNo = true
							icanAdd = false
							return
						} else {
							this.$u.toast("可预约时间段至少30分钟")
							isTimeNo = true
							icanAdd = false
							return
						}

					}

				} else {

					let arr = [...this.form.selectTimes]
					arr.forEach((item, index) => {
						if (index != arr.length - 1) {
							let startT = getChuo(item.start)
							let endT = getChuo(item.end)
							let sub = endV - endT

							// 
							// 如果结束时间大于已有时间段的结束时间
							if (endV > endT) {
								if (sub < temp) {


									this.$u.toast("可预约时间段至少30分钟")
									isTimeNo = true
									icanAdd = false
									return
								}
							}
							// 结束时间重叠
							if (endV == endT) {

								icanAdd = false
								return
							}
							// 
							// 结束时间被包裹，铁定相交
							if (endV > startT && endV < endT) {
								icanAdd = false
								return
							}

						}
					})



				}
				if (icanAdd) {
					this.form.selectTimes[this.actTimeIndex].end = value
					this.showEnd = false
					this.isChangeEnd = false
				} else {
					console.log(isTimeNo);
					if (!isTimeNo) {
						this.$u.toast("与已有时间段相冲突")
					}

					return
				}

			},
			hanleEndCancle() {
				this.showEnd = false
				this.isChangeEnd = false
			},
			// 删除时间段
			handleDelTime(index) {
				if (this.form.selectTimes.length == 1) {
					uni.$u.toast('至少有一个可预约时间段')
					return
				} else {
					this.form.selectTimes.splice(index, 1)
				}

			},
			// 编辑时间段
			handleEditTime(index, type) {
				if (type == 0) {
					this.isChangeStart = true
					this.actTimeIndex = index
					this.actStart = this.form.selectTimes[this.actTimeIndex].start
					this.showStart = true
				} else if (type == 1) {
					this.isChangeEnd = true
					this.actTimeIndex = index
					this.actEnd = this.form.selectTimes[this.actTimeIndex].end
					this.showEnd = true
				}




			},
			// 添加可预约时间段
			handleAddTimeOp() {
				let obj = {
					start: "",
					end: ""
				}
				this.form.selectTimes.push(obj)
			},
			// 删除设备
			handleRemoveEq(index) {
				if (this.form.eqList.length == 1) {
					uni.$u.toast('至少填写一个设备')
					return
				} else {
					this.form.eqList.splice(index, 1)
				}
			},
			// 添加设备
			handleAddEq() {
				let obj = {
					equName: "",
					number: 0,
				}
				this.form.eqList.push(obj)

			},
			// 点击显示实验室选择列表
			handleChooseT(index) {
				if (index == 0) {
					this.showType = true
				} else if (index == 1) {
					this.showWay = true
				}

			},
			// 实验室类别被点击
			handleTypeChoose(data) {

				let index = data.indexs[0]
				this.form.typeId = this.types[index].typeId

				this.typeValue = this.types[index].typeName
				// 单独做个类别表单验证
				this.$refs.uForm.validateField("typeId")
				this.showType = false
			},
			// 实验室审核方式被点击
			handleTypeChoose1(data) {
				let index = data.indexs[0]
				this.form.isExamine = this.ways[index].isExamine
				this.wayValue = this.ways[index].typeName
				// 单独做个审核方式的表单验证
				this.$refs.uForm.validateField("isExamine")
				this.showWay = false
			},
			// 实验室类别选择关闭按钮点击
			handleTypeCancel() {
				this.showType = false
			},
			handleTypeCancel1() {
				this.showWay = false
			},
			// 获取所有实验室类别
			handleGetAllType() {
				getAllLabType().then(result => {
					let arr = []
					arr = [...result.data]
					this.columns[0] = arr
					this.types = arr
					console.log(this.columns);

				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		padding: 20upx;
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.top_info {
			width: 100%;
			min-height: 680upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			padding-bottom: 46upx;

			.info_item {
				box-sizing: border-box;
				padding: 0 30upx;
				width: 100%;
				min-height: 95upx;
				background-color: #fff;
				border-bottom: 3upx solid #f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.item_title {
					position: relative;
					width: 200upx;
					font-weight: 600;

					.important {
						position: absolute;
						top: -2upx;
						left: -20upx;
						font-size: 36upx;
						color: red;


					}

				}

				.item_input {
					flex: 1;
					height: 100%;
					// margin-top: 7upx;
				}
			}

			.address {
				width: 100%;
				height: 200upx;
			}
		}


		.intro_center {
			width: 100%;
			min-height: 270upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			padding-bottom: 10upx;

			.info_item {
				box-sizing: border-box;
				padding: 0 30upx;
				width: 100%;
				min-height: 95upx;
				background-color: #fff;
				border-bottom: 3upx solid #f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.item_title {
					position: relative;
					width: 200upx;
					font-weight: 600;

					.important {
						position: absolute;
						top: -2upx;
						left: -20upx;
						font-size: 36upx;
						color: red;


					}

				}

				.item_input {
					flex: 1;
					height: 100%;
					// margin-top: 7upx;
				}
			}

			.address {
				width: 100%;
				height: 200upx;
			}
		}

		.lab_photo {
			position: relative;
			width: 100%;
			min-height: 295upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			// padding-bottom: 30upx;
			// 
			// 

			.photo_top {
				position: relative;
				width: 100%;
				height: 95upx;
				font-size: 30upx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30upx;
				border-bottom: 3upx solid #f1f1f1;

				.important {
					position: absolute;
					top: 26upx;
					left: 10upx;
					// top: -2upx;
					// left: -20upx;
					font-size: 36upx;
					color: red;


				}
			}

			.photo_bottom {
				// 
				width: 100%;
				box-sizing: border-box;
				padding: 20upx;

				.b_upload {
					position: relative;
					width: 200upx;
					height: 200upx;
					width: 100%;

				}
			}
		}

		.intor_new {
			width: 100%;
			min-height: 430upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			padding-bottom: 30upx;

			.info_item {
				box-sizing: border-box;
				padding: 0 30upx;
				width: 100%;
				min-height: 95upx;
				background-color: #fff;
				border-bottom: 3upx solid #f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.item_title {
					position: relative;
					width: 200upx;
					font-weight: 600;

					.important {
						position: absolute;
						top: -2upx;
						left: -20upx;
						font-size: 36upx;
						color: red;


					}

				}

				.item_input {
					flex: 1;
					height: 100%;
					// margin-top: 7upx;
				}
			}

			.address {
				width: 100%;
				height: 200upx;
			}
		}

		.timeoption {
			position: relative;
			width: 100%;
			min-height: 240upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			padding-bottom: 30upx;

			.time_top {
				position: relative;
				width: 100%;
				height: 95upx;
				font-size: 30upx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30upx;

				.important {
					position: absolute;
					top: 26upx;
					left: 10upx;
					// top: -2upx;
					// left: -20upx;
					font-size: 36upx;
					color: red;


				}
			}

			.time_add {
				position: absolute;
				top: 20upx;
				right: 20upx;
				width: 115upx;
				height: 50upx;
			}

			.t_item {
				width: 100%;
				height: 95upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				box-sizing: border-box;
				padding: 0 20upx;
				align-items: center;

				.start {
					width: 45%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;


					.tip {
						width: 78upx;
						height: 100%;
						font-size: 26upx;

					}

					.text {
						font-size: 26upx;
						margin-right: 25upx;
						width: 65upx;
						text-align: center;
					}

					.edit_btn {
						width: 70upx;
						height: 50upx;
					}
				}

				.end {
					width: 45%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;


					.tip {
						width: 78upx;
						height: 100%;
						font-size: 26upx;


					}

					.text {
						font-size: 26upx;
						margin-right: 25upx;
						width: 65upx;
						text-align: center;
					}

					.edit_btn {
						width: 70upx;
						height: 50upx;
					}
				}

				.del_btn {
					width: 100upx;
					height: 50upx;
				}
			}
		}

		.eq_center {
			position: relative;
			width: 100%;
			min-height: 200upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			padding-bottom: 30upx;

			.eq_top {
				position: relative;
				width: 100%;
				height: 95upx;
				font-size: 30upx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30upx;

				.important {
					position: absolute;
					top: 26upx;
					left: 10upx;
					// top: -2upx;
					// left: -20upx;
					font-size: 36upx;
					color: red;


				}
			}

			.eq_add {
				position: absolute;
				top: 20upx;
				right: 20upx;
				width: 115upx;
				height: 50upx;
			}

			.c_item {
				position: relative;
				width: 100%;
				height: 190upx;
				border-bottom: 2upx solid #f1f1f1;

				&:last-child {
					border-bottom: none;
				}

				.eq_sub {
					position: absolute;
					top: 70upx;
					right: 20upx;
					width: 115upx;
					height: 50upx;
				}

				.item_name {
					box-sizing: border-box;
					padding: 0 20upx;
					width: 100%;
					// 
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.item_tip {
						height: 100%;
						width: 200upx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

					}

					.item_input {
						box-sizing: border-box;
						padding-right: 135upx;
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
					}

				}

			}
		}

		.submit {
			width: 100%;
			height: 50upx;
			box-sizing: border-box;
			// padding: 0 20upx;
			margin-top: 35upx;
			margin-bottom: 35upx;
		}

	}
</style>